<template >
<div class="phone-bar">
   <span class="no-link-state fl phone-state" v-show ='noLinkSign'>
      {{ctiUiDesc}}
   </span>
  <div class="phone-state free " :class="[currentStyle,isCallingStatus?'calling-bg':'']"  data-v-7moor v-show="!noLinkSign">
    <phone-bar-timers :class="ctiShowNumber?'calling-time':''"></phone-bar-timers>
    <div v-show="ctiShowNumber" class="group-wrap">
      <!--外呼中带着省市和号码-->
      <span class="stateSpan fr">
          {{ctiUiDesc}}
        </span>
    </div>
    <div v-show="!ctiShowNumber && !callInFlag">
      <!--空闲等状态，可切换电话条状态-->
      <el-dropdown @command="changeCdrStatus" trigger="click" size="small">
        <span>
          {{ctiUiDesc}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for=" status in phoneBarStauts " :key="status.key" v-show="status.key !== phoneBarBusyType" :command="status.key">{{status.value}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div v-show="!ctiShowNumber && callInFlag">
      <!--来电中只有通话状态没有省市和号码-->
      <span>{{ctiUiDesc}}</span>
    </div>
    <div class="callingNum" v-show="ctiShowNumber">
      <span>{{checkHideNum(callingNum)}}</span>
      <span v-if="!isHidenArea">{{calleeArea}}</span>
    </div>
  </div>
  <el-popover ref="call-history"  placement="bottom" width="300" trigger="click" v-model="callVisible" @show="showCallHistoryPopover">
   <el-row :gutter="20">
     <el-col :span="2">
        <el-popover
          placement="left-start"
          width="180"
          trigger="click" v-model="phoneVisible" @show="phoneBookIsShow">
            <div>
            <el-input :placeholder="$t('configLazyLoad.channel.phoneBookTips2')" suffix-icon="el-icon-search" v-model="searchContent" size="mini" @keyup.native.enter="handleIconClick" @input="handleIconClick"></el-input>
            <ul class="phone-item">
              <li v-for="(item,index) in phoneBookTable" :key='index' @click.stop="toPhoneNum(item.number)">
                <el-row>
                  <el-col :span="8">
                    <div v-if='item.name.length>3' class="item">
                      <el-tooltip effect="dark" :content="item.name" placement="top">
                        <span >{{item.name}} </span>
                      </el-tooltip>
                    </div>
                    <div v-else>
                      <span>{{item.name}}</span>
                    </div>
                  </el-col>
                  <el-col :span="16" class="number">
                    <div v-if='item.number.length>13' class="item">
                      <el-tooltip effect="dark" :content="item.number" placement="top">
                        <span >{{item.number}} </span>
                      </el-tooltip>
                    </div>
                    <div v-else>
                      <span>{{item.number}} </span>
                    </div>
                  </el-col>
                </el-row>
              </li>
            </ul>
            </div>
            <div slot="reference">
              <div class="icon iconfont icon-dianhuaben-01"></div>
            </div>
        </el-popover>
     </el-col>
     <el-col :span="22">
      <div class="dialout_wrap" id="auto_complete_dialout">
        <el-row class="border-grid">
          <el-col :span="21" class="tac">
            <el-autocomplete
              class="inline-input"
              v-model.trim="phoneNum"
              :fetch-suggestions="querySearch"
              :placeholder="$t('sms.enterNumToSearch')"
              @keyup.native.enter="softBarDialoutPopup"
              :trigger-on-focus="false"
              ></el-autocomplete>
          </el-col>
        </el-row>
        <div class="dialout_button_wrap dialout-button-wrap" @click.stop="softBarDialoutPopup">
          <div class="icon iconfont icon-dianhua"></div>
        </div>
      </div>
     </el-col>
   </el-row>
    <div class="history-wrap">
      <ul class="history-item">
        <li v-for="item in callList" :key="item.CALL_SHEET_ID">
          <i :class="'call_'+item.CONNECT_TYPE"></i>
          <div class="history-time">{{callDate(item.OFFERING_TIME)}}</div>
          <div class="history-dialout" @click.stop="(item.CONNECT_TYPE=='dialout' || item.CONNECT_TYPE=='dialTransfer')?softBarDialoutPopup(item.CALLED_NO):softBarDialoutPopup(item.CALL_NO)">
            <div class="history-name" :title="(item.CONNECT_TYPE=='dialout' || item.CONNECT_TYPE=='dialTransfer')?item.CUSTOMER_NAME:item.CUSTOMER_NAME">{{(item.CONNECT_TYPE=='dialout' || item.CONNECT_TYPE=='dialTransfer')?item.CUSTOMER_NAME:item.CUSTOMER_NAME}}</div>
            <div class="history-phone" :title="(item.CONNECT_TYPE=='dialout' || item.CONNECT_TYPE=='dialTransfer')?checkHideNum(item.CALLED_NO):checkHideNum(item.CALL_NO)">(<span>{{(item.CONNECT_TYPE=='dialout' || item.CONNECT_TYPE=='dialTransfer')?checkHideNum(item.CALLED_NO):checkHideNum(item.CALL_NO)}}</span>)</div>
          </div>
        </li>
      </ul>
    </div>
  </el-popover>
  <el-popover ref="send-sms" v-model="smsvisible" placement="bottom" width="300" trigger="click" @show="showSmsPopover" v-if="!isMonitorVersion">
    <sms-popover :isSmsTemplate="isSmsTemplate" @smsWindowSatus="smsWindowSatus"></sms-popover>
  </el-popover>
   <el-popover ref="autoHangupRef" placement="bottom" width="200" trigger="click">
     <ul>
       <li class="hangup-li" v-for="(item, index) in getAutoHangupList" :key="index">
         <span class="hangup-exten">{{item.Exten}}</span>
         <i class="iconfont icon-guaduan_guaduan" @click.stop="hangupThreeCall(item)"></i>
       </li>
     </ul>
  </el-popover>
  <div class="phone_bar_btn">
    <el-tooltip class="item" effect="dark" :content="$t('softPhoneBar.callout')" placement="bottom" v-show="dialout">
       <span class="call icon iconfont icon-dianhua" data-v-7moor v-show="dialout" @click.stop="getCallList" :callList="callList" v-popover:call-history>
    </span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="$t('softPhoneBar.hangup')" placement="bottom" v-show="hangup">
    <span class="hangup" @click.stop="phoneHangup" data-v-7moor>
      <i class="iconfont icon-guaduan1"></i>
    </span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="$t('softPhoneBar.phoneHold')" placement="bottom"  v-show="hold">
      <span class="hold" @click.stop="phoneHold" data-v-7moor>
        <i class="iconfont icon-baochi"></i>
        <!--保持通话-->
      </span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="$t('softPhoneBar.phoneUnhold')" :openDelay="200" transition="fade-leave" placement="bottom" v-show="recover">
      <span class="recover"  @click.stop="phoneUnhold" data-v-7moor>
        <i class="icon iconfont icon-huifu"></i>
        <!--恢复通话-->
      </span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="$t('softPhoneBar.transfer')" :openDelay="200" transition="fade-leave" placement="bottom"  v-show="transfer" >
      <span class="transfer" data-v-7moor>
        <transfer :showTransferDialog="showTransferDialog" :trasferReason="trasferReason" :isCloseTransfer="transfer" :remark="remark"></transfer>
        <!--转接-->
      </span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="$t('softPhoneBar.consultThreeWay')" :openDelay="200" transition="fade-leave" placement="bottom" v-show="consultThreeWayCall" >
       <span class="consult3way"  @click.stop="phoneThreewaycall('912345')" data-v-7moor>
        <i class="icon iconfont icon-sanfanghuihua"></i>
        <!--转三方通话-->
      </span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="$t('softPhoneBar.phoneTransfer')" :openDelay="200" transition="fade-leave" placement="bottom" v-show="consultTransfer" >
      <span class="consult-transfer" @click.stop="phoneTransfer('912345', 'number')" data-v-7moor>
        <i class="icon iconfont icon-zixun"></i>
        <!--转接咨询-->
      </span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="$t('softPhoneBar.threeWay')" :openDelay="200" transition="fade-leave" placement="bottom" v-show="threeway">
      <span class="3way" data-v-7moor>
        <!--三方通话-->
         <i class="icon iconfont icon-sanfanghuihua"></i>
      </span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="$t('softPhoneBar.closeThreeWay')" :openDelay="200" transition="fade-leave" placement="bottom" v-show="autoHangup">
      <span data-v-7moor>
        <!--三方之后，主动挂机其他方-->
         <i class="icon iconfont icon-sanfanghuihua" v-popover:autoHangupRef></i>
      </span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="$t('softPhoneBar.consult')" :openDelay="200" transition="fade-leave" placement="bottom"  v-show="consult">
      <span class="consult" data-v-7moor>
        <consult :showConsultDialog="showConsultDialog" :isCloseConsult="consult"></consult>
      </span>
      <!--咨询-->
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="$t('softPhoneBar.phoneStopConsult')" :openDelay="200" transition="fade-leave" placement="bottom"  v-show="stopConsult">
      <span class="stopConsult" @click.stop="phoneStopConsult" data-v-7moor>
        <i class="icon iconfont icon-quxiaozixun"></i>
        <!--结束咨询-->
      </span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="ivr" placement="bottom"  v-show="ivrMenu">
      <span class="ivr span-color" data-v-7moor>
        <turn-ivr :isCloseIvrMenu="ivrMenu"></turn-ivr>
        <!--ivr-->
      </span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="$t('softPhoneBar.getInvestigate')" :openDelay="200" transition="fade-leave" placement="bottom"  v-show="Investigate">
      <span class="investigate" data-v-7moor>
        <investigate :isCloseInvestigate="Investigate"></investigate>
       <!--满意度调查-->
      </span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="isMonitorVersion ? $t('public.monitorVerTip') : $t('public.SMS')" :openDelay="200" transition="fade-leave" placement="bottom" v-show="sms">
      <span class="sms icon iconfont icon-duanxin1"  v-if="isMonitorVersion" style="cursor: not-allowed"></span>
      <span class="sms icon iconfont icon-duanxin1" id="megSms" v-if="!isMonitorVersion"  @click.stop="getSmsTemplate" v-popover:send-sms data-v-7moor></span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="$t('workbench.answer')" :openDelay="200" transition="fade-leave" placement="bottom" v-show="answer">
      <span class="sms icon iconfont icon-tonghua" id="answer"  @click.stop="answerClick" >{{$t('workbench.answer')}}</span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="$t('softPhoneBar.hangup')" :openDelay="200" transition="fade-leave" placement="bottom" v-show="answer">
      <span class="sms icon iconfont icon-guaji" id="hangup"  @click.stop="hangupClick" >{{$t('workbench.hangup')}}</span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="$t('softPhoneBar.noteAndLabel')" :openDelay="200" transition="fade-leave" placement="bottom"  v-show="setCallLabel">
      <span class="mark" data-v-7moor>
          <div>
          <i class="icon iconfont icon-dabiaoqian" @click.stop="getMark"> </i>
        </div>
        <!--打标签-->
      </span>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" :content="$t('cti.trasferReason')" :openDelay="200" transition="fade-leave" placement="bottom" v-show="transferReasonShow">
      <span class="investigate" data-v-7moor>
        <i class="icon iconfont icon-tixing-01 im"  @click.stop="openTransferReason"></i>
       <!--转接原因-->
      </span>
    </el-tooltip>
    <div><waiting  :waitState="waitState" :showTransferCancelDialog="showTransferCancelDialog"></waiting></div>
    <div id="call_screen_wrap" class="customer-dialog" v-if="getCallCustomerDetail">
      <el-dialog :close-on-click-modal="false"
                 append-to-body modal-append-to-body lock-scroll top="10%" :title="$t('cti.dialoutWinow')"
                 :visible.sync="callScreen" class="el-dailog__customize call-out-window" width="75%" @close="closeCallScreen">
        <template>
          <cust-summary v-if="onlyOneCust"
            :customerInfo="customerInfo"
            :hiddenLine = 'hiddenLine'
            :callScreen = 'callScreen'
            :callInfo="{'CALLED_NO': newPhoneNum}"
            :currentBusinessObj = "currentBusinessObj"
            ></cust-summary>
          <!--add-customer组件 :callScreen = 'callScreen' 是因为isDalog在别的调用的地方也是这个值，没法做区分-->
          <add-customer v-if="multiCust"
            :labelValue = "labelValue"
            :isDailog = "true"
            :reSize = "true"
            :isDalog = "callScreen"
            :callScreen = 'callScreen'
            :popupPhoneNumber = "popupPhoneNumber"
            :currentBusinessObj = "currentBusinessObj"
            :custInfo = "custInfo"
            :bindCustomer = 'bindCustomer'
            :tel="newPhoneNum"
            @merge="MergeCust"
            @addCustomer="addCustomer"
            @changeCustomeLabelValue="changeCustomeLabelValue"
            ></add-customer>
          <edit-cust v-if="updateCust"
            :editCustType ="update"
            :custInfo = "updateCustInfo"
            :isBlight = "false"
            :isDailog = "true"
            :currentBusinessObj = "currentBusinessObj"
            :callBackAdd = 'callBackAdd'
            @editCust='updateCustomer'
            @callBackAddCust = 'callBackAddCust'
            ></edit-cust>
        </template>
      </el-dialog>
    </div>
    <el-dialog
      :visible.sync="valOfIvrMenuDialog.dialog"
      append-to-body
      modal-append-to-body
      lock-scroll
      width="30%"
      :title="$t('public.tip')"
      @close="cancleValOfIvrMenuDialog"
    >
     <div>{{valOfIvrMenuDialog.data || ''}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleValOfIvrMenuDialog" type="primary" size="small">{{$t('public.confirm')}}</el-button>
     </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" append-to-body modal-append-to-body lock-scroll top="10%" :title="$t('cti.dialoutWinow')" :visible.sync="dialoutUrl" width="75%">
      <template>
        <div v-if="Array.isArray(getScreenUrl)" class="diaoutUrl">
          <div clss="businessesSelect" style="margin: 10px">业务类型</div>
          <el-select v-model="toolBarValue" filterable placeholder="请选择" style="margin: 0px 10px 10px">
            <el-option
              v-for="(toolBarItem, index) in getScreenUrl"
              :key="index"
              :label="toolBarItem.name"
              :value="toolBarItem.url">
            </el-option>
          </el-select>
          <iframe v-if="toolBarValue !== ''" :src="handerIframeUrl(toolBarValue)" frameborder="0" class="diaoutUrl"></iframe>
        </div>
        <iframe v-else :src="getScreenUrl" frameborder="0" class="diaoutUrl"></iframe>
      </template>
    </el-dialog>
    <el-dialog
      :visible.sync="riskDialog"
      append-to-body
      modal-append-to-body
      lock-scroll
      width="30%"
      @close="cancleRiskDialout"
    >
      <span slot="title" style="font-size:18px;color:#000;"> <span :class="riskData.warn? 'el-icon-warning': 'el-icon-remove'" style="padding-right:4px;"></span>{{riskData.content?riskData.content.title:''}}</span>
      <div v-if="riskData.monitorType === 'CALL_TIME_SLOT'">
        <span v-text="riskData.warn?'管理员设置当前时间外呼警告，外呼可能存在风险，是否继续外呼？':'管理员设置当前时间禁止外呼。'"></span>
        <div class="risk-warn-timetext">
          <span v-text="riskData.warn?'外呼警告时段：': '禁止外呼时段：'"></span>
          <div>{{riskData.content?riskData.content.body:''}}</div>
        </div>
      </div>
      <div v-else class="risk-other">{{riskData.content?riskData.content.body:''}}</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleRiskDialout" type="primary" size="small">确 定</el-button>
     </span>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" append-to-body modal-append-to-body lock-scroll top="10%" :title="$t('cti.trasferReason')" :visible.sync="openTransferReasonShow" class="investigate">
      <template>
        <span>{{$t('cti.trasferReasonTip2', {agent:transferAgent,agentNum:transferAgentNum})}}</span>
        <el-input size="mini" type="textarea" :rows="4" v-model="trasferReason" disabled style="margin:10px 0px 20px 0px" :placeholder="$t('cti.trasferReasonTip1')"></el-input>
      </template>
    </el-dialog>
    <label-and-note ref="labelAndNote" :phoneBarFlag="true" :trasferReason="trasferReason" :callSheetId="$store.state.cti.globalLet.currentCallSheetId" :refreshCallLabel="refreshNum"></label-and-note>
  </div>
  <audio src="/static/audio/webrtc/calleering.wav" id="webrtc_calleering" style='display:none' loop='loop'></audio>
  <audio src="/static/audio/webrtc/hangup.wav" id="webrtc_hangup" style='display:none'></audio>
</div>
</template>
<script>
  import Transfer from './Transfer.vue'
  import TurnIvr from './TurnIvr.vue'
  import Consult from './Consult.vue'
  import SmsPopover from './SmsPopover.vue'
  import Investigate from './Investigate.vue'
  import Waiting from './Waiting.vue'
  import PhoneBarTimers from './PhoneBarTimers.vue'
  import AddCustomer from '@/components/business-modules/customer/AddCustomer.vue'
  import CustSummary from '@/components/business-modules/customer/CustSummary.vue'
  import EditCust from '@/components/business-modules/customer/AddCus.vue'
  import LabelAndNote from '@/components/business-modules/call/LabelAndNote.vue'
  import {checkHideTel, isHasFunc, phoneFilterChats, m7Language, timeFormat} from '@/utils/m7Utils'
  export default {
    name: 'PhoneBar',
    data () {
      return {
        isMonitorVersion: false,
        isHidenArea: false,
        value: '',
        hiddenLine: 'hide-line',
        refreshNum: '', // 刷新标签的标志
        getSingleLabel: [], // 单标签
        getMultiLabel: {}, // 多级标签
        bindCustomer: {  // 绑定已存在客户的数据
          searchShow: true,
          custObj: {},
          form: {}
        },
        phoneBarFlag: true,
        phoneNum: '',  // 外呼的表单输入
        newPhoneNum: '', // 电话外呼时的号码
        smsvisible: false, // 短信popover
        callVisible: false, // 通话popover
        phoneVisible: false, // 电话本popover
        onlyOneCust: false, // 指定位到一个客户
        callScreen: false, // 外呼弹屏的标志
        dialoutUrl: false, // 外呼对接的url
        calllabel: false, // 打标签的弹窗
        multiCust: false, // 未知客户或定位到多个客户
        labelValue: 0, // 新增客户和合并客户的tab切换 eg： :label="3" 、:label="6"
        callBackAdd: false, // 外呼弹窗的更新客户信息界面回到新增界面
        popupPhoneNumber: '',
        toolBarValue: '',
        currentBusinessObj: {
          type: 'customer',
          tabType: 'customer_my',
          callId: this.$store.state.cti.globalLet.currentCallSheetId
        },
        custInfo: {phone: [{tel: '', memo: ''}]}, // 客户信息
        update: 'update',
        updateCust: false,
        updateCustInfo: {},
        labelType: '', // 判断是显示单标签还是多级标签的标志
        callList: [], // 电话条外呼的list
        checkLabels: [],
        isSmsTemplate: 0, // 触发sms子组件的action
        isCallingStatus: false, // 电话条是否呼叫中的标志
        searchContent:'',
        tableData: [],
        phoneBookTable:[],
        openTransferReasonShow: false,
        trasferReason:'',
        transferAgent:'',
        transferAgentNum:'',
        remark:''
      }
    },
    components: {
      Transfer,
      TurnIvr,
      Consult,
      Investigate,
      Waiting,
      AddCustomer,
      CustSummary,
      LabelAndNote,
      EditCust,
      SmsPopover,
      PhoneBarTimers
    },
    methods: {
      handleClosePopover () {
        this.$nextTick(() => {
          this.$refs.autoHangupRef.doClose()
        })
      },
      hangupThreeCall (item) { // 三方通话状态下，发起方可自主进行对客户方或被咨询方挂断。
        this.$confirm(`${item.Exten}将退出三方通话，确定执行？`, this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
            this.$store.dispatch('phoneHangup', item)
        }).catch(() => {
        })
      },
      cancleRiskDialout () { // 风控弹窗点击确定，挂机
        this.$store.commit('RISK_DIALOG', false)
        // 恢复电话条
        this.$store.commit('CALLINGNUM', '') // 清空通话中的号码
        this.$store.commit('CTI_SHOWNUMBER', false) // 电话条变回空闲
        this.$store.commit('CALLSCREEN_CALLINGNUM', '') // 清空外呼弹屏中用的正在通话中的号码，和电话条中显示callingNum断开关联
      },
      handerIframeUrl (url) {
        return url.replace('http://', '//')
      },
      callDate (time) {
        return timeFormat(time, 'card')
      },
      cancleValOfIvrMenuDialog () { // 关闭弹窗 转ivr菜单 VAL_OF_IVR_MENU
        this.$store.commit('VAL_OF_IVR_MENU_DIALOG', {data: '', dialog: false})
      },
      addCustomer (val) { // 添加客户
        val.callId = this.$store.state.cti.globalLet.screenCallSheetId
        val.dealSrc = 'dialPopup'
        val.actionType = 'self'
        val.callTel = this.newPhoneNum
        this.$store.dispatch('addCustomer', val).then((form) => {
          if (form.success) { // 请求失败时不展示客户信息界面
            this.$data.multiCust = false
            this.$data.updateCust = false
            this.$store.commit('CURRENT_CUST_INFO', form.data)
            this.$data.onlyOneCust = true
            this.$store.commit('call/UPDATE_CURRENT_CUSTOMER_INFO', {callId: val.callId, customer: form.data, onlyCard: true})
            this.$store.commit('call/TEMP_CUSTOMER_DATA', {callId: val.callId, customer: form.data})
          }
        })
      },
      showCallHistoryPopover () { // 外呼popover
        this.smsvisible = false // 外呼气泡出来时隐藏sms气泡
        this.callVisible = true
        this.$nextTick(function () { // popover出来时，自动聚焦，之前写在updated dom一变动就会被触发
          let pane = document.getElementById('auto_complete_dialout')
          if (pane) {
            let inputNode = pane.getElementsByClassName('el-input__inner')[0]
            if (inputNode) {
              inputNode.value = ''
              inputNode.focus()
            }
          }
        })
      },
      smsWindowSatus (data) { // 是否要关闭短信弹窗
        this.smsvisible = data
      },
      showSmsPopover () {
        this.callVisible = false // sms气泡出来时隐藏外气泡
        this.smsvisible = true
      },
      callBackAddCust (val) { // 外呼弹窗的更新客户信息界面回到新增界面
        this.multiCust = true
        this.updateCust = false
        this.onlyOneCust = false
      },
      updateCustomer (form) { // 更新客户
        form.type = this.currentBusinessObj.type
        form.tabType = this.currentBusinessObj.tabType
        form.callId = this.$store.state.cti.globalLet.currentCallSheetId
        this.$store.dispatch('updateCustomer', form).then((resp) => {
          if (!resp) {
            return
          }
          this.updateCust = false
          this.multiCust = false
          this.onlyOneCust = true
          let data = {
            customerId: form._id,
            callId: this.$store.state.cti.globalLet.screenCallSheetId,
            phone: this.newPhoneNum,
            dealSrc: 'dialPopup',
            sessionId: this.$store.state.session.sessionId
          }
          this.$store.dispatch('callScreenLocationCustomer', data).then(resp => {
            this.isDailog = false
            this.$message({
              type: 'success',
              message: this.$t('customer.succMerge')
            })
            this.$store.commit('call/UPDATE_CURRENT_CUSTOMER_INFO', {callId: data.callId, customer: form, onlyCard: true})
            this.$store.commit('call/TEMP_CUSTOMER_DATA', {callId: data.callId, customer: form})
          })
        })
      },
      closeCallScreen () { // 外呼弹屏关闭时关掉客户信息 =》查看详情
        let node = document.getElementById('close_custom_detail')
        if (node) {
          node.click()
        }
      },
      changeCustomeLabelValue (label) { // 新增客户和合并客户的tab切换时
        this.labelValue = label.labelValue
      },
      checkHideNum (num) { // 隐藏号码
        return checkHideTel(num, this.$store.state.session.user)
      },
      MergeCust (val) { // 合并客户
        this.$data.multiCust = false
        this.$store.commit('CURRENT_CUST_INFO', val.custInfo)
        let phoneArr = val.custInfo.phone
        let phoneFlag = false
        if (phoneArr) {
          for (let i = 0; i < phoneArr.length; i++) {
            if (phoneArr[i].tel === this.newPhoneNum) {
              phoneFlag = true
              break
            } else {
              phoneFlag = false
            }
          }
        }
        if (phoneFlag) { // 点击保存按钮之后直接合并客户
          let data = {
            customerId: val._id,
            callId: this.$store.state.cti.globalLet.screenCallSheetId,
            phone: this.newPhoneNum,
            dealSrc: 'dialPopup',
            sessionId: this.$store.state.session.sessionId
          }
          this.$store.dispatch('callScreenLocationCustomer', data).then(resp => {
            this.isDailog = false
            this.$message({
              type: 'success',
              message: this.$t('customer.succMerge')
            })
            this.$store.commit('call/UPDATE_CURRENT_CUSTOMER_INFO', {callId: data.callId, customer: val.custInfo, onlyCard: true})
            this.$store.commit('call/TEMP_CUSTOMER_DATA', {callId: data.callId, customer: val.custInfo})
            this.$data.onlyOneCust = true
          })
        } else {  // 点击保存之后展示更新客户界面，再点保存才真正保存为客户，也可以返回上一个界面
          this.updateCust = true
          this.onlyOneCust = false
          this.callBackAdd = true
          let newPhoneObj = {tel: this.newPhoneNum, memo: ''}
          // 当这个用户没有电话时，没有phone字段
          //
          if (!val.custInfo.phone) {
            val.custInfo.phone = []
          }
          val.custInfo.phone.push(newPhoneObj)
          this.updateCustInfo = val.custInfo
        }
      },
      getCallList () { // 点击外呼按钮时，获取最新的5条通话历史
        let data = {
          DISPOSAL_AGENT: this.$store.state.session.sessionId
        }
        this.$store.dispatch('queryMyLatestCdr', data).then((resp) => {
          if (resp && resp.success) {
            this.callList = resp.list || []
          }
        })
      },
      phonenumRember (phoneNum) { // 每次外呼的号码，本地存储记忆，方便外呼时下拉联想
        if (phoneNum === '') {
          return
        }
        if (typeof phoneNum === 'object') { // input 为空，直接enter的情况
          return
        }
        let phoneCookie = window.localStorage.getItem('phoneNum') || ''
        let phoneNumArr = phoneCookie.split('%3B')
        let arrLength = phoneNumArr.length
        let sameFlag = false
        if (arrLength !== 0) {
          for (let j in phoneNumArr) {
            if (phoneNum === phoneNumArr[j]) {
              sameFlag = true
            }
          }
        }
        if (!sameFlag) {
          if (arrLength < 5 && arrLength !== 0) {
            let savedNum = phoneNumArr[0]
            for (let i in phoneNumArr) {
              if (i > 0) {
                savedNum = savedNum + '%3B' + phoneNumArr[i]
              }
            }
            phoneNum = phoneNum.trim() + '%3B' + savedNum
          } else if (arrLength === 5) {
            phoneNum = phoneNum.trim() + '%3B' + phoneNumArr[0] + '%3B' + phoneNumArr[1] + '%3B' + phoneNumArr[2] + '%3B' + phoneNumArr[3]
          }
          window.localStorage.setItem('phoneNum', phoneNum)
        }
      },
      //打开电话本
      phoneBookIsShow(){
        this.phoneVisible = true
        this.phoneNum = ''
        this.fetchData()
      },
      softBarDialoutPopup (historyNum) {
        if (typeof historyNum === 'object') { // input 为空，直接enter的情况
          historyNum = ''
        }
        let phoneNum = historyNum || this.phoneNum.trim()
        phoneNum = phoneFilterChats(phoneNum)
        this.callVisible = false
        this.restaurants = this.loadAll()
        this.newPhoneNum = phoneNum
        this.bindCustomer.form = {'field': 'phone', 'combox': this.newPhoneNum, 'custType': 'call', 'page': 1, 'limit': 10}
        // this.callingNum = phoneNum
        this.$store.dispatch('phoneDialout', {phoneNum: phoneNum}).then(resp => {
          if (resp) { // 外呼成功之后重置外呼表单
            this.phoneNum = ''
          }
        })
        this.phonenumRember(phoneNum)
      },
      /**
       *  挂机
       */
      phoneHangup () {
        this.trasferReason = ''
        this.$store.dispatch('phoneHangup')
      },
      /**
       *  保持
       */
      phoneHold () {
        this.$store.dispatch('phoneHold')
      },
      phoneUnhold () {
        this.$store.dispatch('phoneUnhold')
      },
      phoneStopConsult () { // 结束咨询
        this.$store.dispatch('phoneStopConsult')
      },
      phoneTransfer (num, mode) { // 转接
        this.$store.dispatch('phoneTransfer', {phoneNum: num, mode: mode, self: this})
      },
      phoneThreewaycall (num) { // 转三方通话
        this.$store.dispatch('phoneThreewaycall', num)
      },
      querySearch (queryString, cb) { // 过滤
        // let restaurants = this.restaurants
        let restaurants = []
        let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter (queryString) {
        return (restaurant) => {
          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0)
        }
      },
      loadAll () { // 获取本地缓存的所有号码
        let num = window.localStorage.getItem('phoneNum') || ''
        if (!num) {
          return []
        }
        let numArr = num.split('%3B')
        let numObj = []
        for (let i = 0; i < numArr.length; i++) {
          numObj.push({'value': numArr[i]})
        }
        return numObj
      },
      changeCdrStatus (command) { // 切换软电话条状态
        let isBusy = true
        if (command === '0') {
          isBusy = false
        }
        let data = {
          isBusy: isBusy,
          busyType: command
        }
        this.$store.dispatch('phoneSetBusy', data)
      },
      getSmsTemplate () { // 点击短信icon时获取短信的模板
        this.isSmsTemplate = Math.random()
      },
      getMark () { // 点击标签icon获取标签
        this.trasferReason = this.trasferReason
        this.$refs.labelAndNote.setShowOperaLog(false)
        this.$refs.labelAndNote.openDialog({})
        this.refreshNum = Math.random()
      },
      answerClick () {
        this.$store.dispatch('Answer')
      },
      hangupClick () {
        this.$store.dispatch('Hangup')
      },
      handleIconClick(){
        this.search()
      },
      search () {
        let _search = this.searchContent.toLowerCase();
        this.phoneBookTable = this.tableData.filter((item) => {
          if (item.name.toLowerCase().indexOf(_search) !== -1 || item.number.toLowerCase().indexOf(_search) !== -1) {
            return true
          }
        })
      },
      fetchData() {
        this.$store.dispatch('queryCallBook', {}).then((resp) => {
          if (resp && resp.success) {
            this.tableData = resp.list || []
          }
          this.search()
        })
      },
      //点击电话本给号码输入框赋值
      toPhoneNum(val){
        this.phoneNum = val
      },
      //转接原因
      openTransferReason () {
        this.openTransferReasonShow = true
      },
       // 换行转义
      return2Br(str) {
        return str.replace(/<br\/>/g, '\n');
      },
    },
    mounted () {
      this.restaurants = this.loadAll()
      let user = this.$store.state.session.user
      if (user.uversion && user.uversion === 'monitor') {
        this.isMonitorVersion = true
      }
      if (isHasFunc('func_hide_cdr_area', user) || (this.$store.state.session.account.isSouthEastAsia && this.$store.state.session.account.isSouthEastAsia === 'true')) {
        if (user.type === 'admin' && user.exten === '0000') {
          this.isHidenArea = false
        } else {
          this.isHidenArea = true
        }
      }
    },
    computed: {
      riskDialog: { // 风控提醒弹窗
        get () {
          return this.$store.state.cti.globalLet.riskDialog || false
        },
        set () {
        }
      },
      riskData () { // 风控数据
        return this.$store.state.cti.globalLet.riskData || {}
      },
      callInFlag () { // 来电的标识，不能切换电话条状态
        return this.$store.state.cti.globalLet.callInFlag
      },
      valOfIvrMenuDialog: { // 转ivr菜单之后 VAL_OF_IVR_MENU
        get () {
          return this.$store.state.cti.globalLet.valOfIvrMenuDialog || {}
        },
        set () {
        }
      },
      getAutoHangupList(){
        return this.$store.state.cti.globalLet.autoHangupList || []
      },
      phoneBarBusyType () { // 当前电话条状态
        return this.$store.state.cti.globalLet.busyType
      },
      customerInfo () { // 当前客户信息
        return this.$store.state.cti.currentCustInfo
      },
      getScreenUrl () { // 外呼对接url
        let url = this.$store.state.cti.globalLet.callScreen
        if (url) {
          this.dialoutUrl = true
          if (Array.isArray(url)) {
            return url
          } else {
            return url.replace('http://', '//')
          }
        } else {
          return ''
        }
      },
      getCallCustomerDetail () { // 外呼弹屏判断是否定位到客户
        let obj = this.$store.state.cti.globalLet.callCustomerDetail
        let flag = this.$store.state.cti.globalLet.callFlag
        let numChoice = this.$store.state.cti.globalLet.callScreenCallingNum
        if (this.$store.state.cti.globalLet.callBySipOrGetway) { // sip话机或者是软电话上外呼的号码，重新赋值
          this.newPhoneNum = this.$store.state.cti.globalLet.callBySipOrGetway
        }
        if (flag) {
          if (obj.CUSTOMER_TYPE) {
            if (obj.CUSTOMER_TYPE === 'unk') {
              this.$data.multiCust = false
// multiCust先变成false再变成true是为了解决addCus.vue组件监听不到watch的问题，若是在addCu组件加deep 可以解决，但怕影响其他方法，次方法影响范围最小
//               解决话机，或者是软电话，或者外呼能力对接到客户系统的外呼弹屏号码不更新的问题（父组件传值已更新，子组件不触发更新）
              this.$nextTick(() => {
                this.$data.multiCust = true
              })
              this.$data.onlyOneCust = false
              this.$data.updateCust = false
              this.$data.labelValue = 3
              this.$data.popupPhoneNumber = ''
              this.$data.custInfo.phone[0].tel = this.newPhoneNum || numChoice
            } else if (obj.CUSTOMER_TYPE === 'one') {
              this.$data.multiCust = false
              this.$data.updateCust = false
//            this.$data.customerInfo = obj.list
              this.$store.commit('CURRENT_CUST_INFO', obj.list)
              this.$data.popupPhoneNumber = ''
              this.$data.onlyOneCust = true
            } else if (obj.CUSTOMER_TYPE === 'multi') {
              this.$data.onlyOneCust = false
              this.$data.multiCust = false
// multiCust先变成false再变成true是为了解决addCus.vue组件监听不到watch的问题，若是在addCu组件加deep 可以解决，但怕影响其他方法，次方法影响范围最小
//               解决话机，或者是软电话，或者外呼能力对接到客户系统的外呼弹屏号码不更新的问题（父组件传值已更新，子组件不触发更新）
              this.$nextTick(() => {
                this.$data.multiCust = true
              })
              this.$data.updateCust = false
              this.$data.labelValue = 6
              this.bindCustomer.form = {'field': 'phone', 'combox': this.newPhoneNum || numChoice, 'custType': 'call', 'page': 1, 'limit': 10}
              this.$data.popupPhoneNumber = this.newPhoneNum || numChoice
              this.$data.custInfo.phone[0].tel = this.newPhoneNum || numChoice
            }
            this.$data.callScreen = true
            this.$store.commit('SCREEN_FLAG', false)
            this.$store.commit('CALL_BY_SIP_OR_GETWAY', '') // 赋值给客户对象后要重新置为空
            return true
          }
        } else {
          this.$data.callScreen = false
          return false
        }
      },
      ctiUiDesc () { // 通话状态
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState // consultTalking talking threeWayTalking
        if (ctiExtenState !== '') {
          currentState = ctiExtenState
        }
        let busyType = this.$store.state.cti.globalLet.busyType
        let busyTyPeName = this.$store.state.cti.globalLet.busyTypeName[busyType]
        if (currentState === 'dialing' || currentState === 'innerDialing' || currentState === 'belling' || currentState === 'innerBelling' || currentState === 'listening' || currentState === 'transferBelling' || currentState === 'transferDialing') {
          // 呼叫中,来电振铃,监听振铃,转接振铃 电话条的颜色变换区分通话中的颜色
          this.isCallingStatus = true
        } else {
          this.isCallingStatus = false
        }
        if (currentState === 'peerstate') {
          return busyTyPeName
        } else {
          return this.$store.state.cti.globalLet._cti_ui_desc[currentState]
        }
      },
      noLinkSign () {
        // 未连接状态
        if (this.$store.state.cti.globalLet._cti_currentState === 0) {
          return true
        } else {
          return false
        }
      },
      currentStyle () { // 给电话条底色根据状态添加class
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let busyType = this.$store.state.cti.globalLet.busyType
        if (currentState === 'peerstate') {
          return 'bustype_' + busyType
        } else {
          return 'currentState'
        }
      },
      dialout () { // 是否显示外呼按钮
        let currentState = this.$store.state.cti.globalLet._cti_currentState
        let stateDescription = this.$store.state.cti.globalLet._cti_stateDescription[currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
        if (ctiExtenState !== '') {
          stateDescription = ctiExtenState
        }
        let dialout = this.$store.state.cti.globalLet._cti_phoneBar_state[stateDescription].dialout
        return dialout ? 1 : 0
      },
      sms () { // 是否显示短信按钮
        if (isHasFunc('func_sort_phone_bar_send_sms', this.$store.state.session.user)) {
          let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
          let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
          if (ctiExtenState !== '') {
            currentState = ctiExtenState
          }
          let sms = this.$store.state.cti.globalLet._cti_phoneBar_state[currentState].sms
          return sms ? 1 : 0
        } else {
          return 0
        }
      },
      setCallLabel () { // 是否显示打标签按钮
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
        if (ctiExtenState !== '') {
          currentState = ctiExtenState
        }
        let setCallLabel = this.$store.state.cti.globalLet._cti_phoneBar_state[currentState].setCallLabel
        if (!setCallLabel && this.$refs.labelAndNote) { // 当用户挂断电话的时候，关闭打标签的弹窗
          this.$refs.labelAndNote.closeDialog()
        }
        return setCallLabel ? 1 : 0
      },
      ivrMenu () { // 是否显示IVR按钮
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
        if (ctiExtenState !== '') {
          currentState = ctiExtenState
        }
        let ivrMenu = this.$store.state.cti.globalLet._cti_phoneBar_state[currentState].ivrMenu
        return ivrMenu ? 1 : 0
      },
      hangup () { // 是否显示挂断按钮
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
        if (ctiExtenState !== '') {
          currentState = ctiExtenState
        }
        let hangup = this.$store.state.cti.globalLet._cti_phoneBar_state[currentState].hangup
        if (!hangup && this.getAutoHangupList.length > 0) {
          this.handleClosePopover()
        }
        return hangup ? 1 : 0
      },
      hold () { // 是否显示保持按钮
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
        if (ctiExtenState !== '') {
          currentState = ctiExtenState
        }
        let hold = this.$store.state.cti.globalLet._cti_phoneBar_state[currentState].hold
        return hold ? 1 : 0
      },
      recover () { // 是否显示恢复按钮
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
        if (ctiExtenState !== '') {
          currentState = ctiExtenState
        }
        let recover = this.$store.state.cti.globalLet._cti_phoneBar_state[currentState].recover
        return recover ? 1 : 0
      },
      transfer () { // 是否显示转接按钮
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
        if (ctiExtenState !== '') {
          currentState = ctiExtenState
        }
        let transfer = this.$store.state.cti.globalLet._cti_phoneBar_state[currentState].transfer
        return transfer ? 1 : 0
      },
      consult () { // 是否显示咨询按钮
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
        if (ctiExtenState !== '') {
          currentState = ctiExtenState
        }
        let consult = this.$store.state.cti.globalLet._cti_phoneBar_state[currentState].consult
        return consult ? 1 : 0
      },
      stopConsult () { // 是否显示结束咨询按钮
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
        if (ctiExtenState !== '') {
          currentState = ctiExtenState
        }
        let stopConsult = this.$store.state.cti.globalLet._cti_phoneBar_state[currentState].stopConsult
        return stopConsult ? 1 : 0
      },
      Investigate () { // 是否显示满意度按钮
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
        if (ctiExtenState !== '') {
          currentState = ctiExtenState
        }
        let Investigate = this.$store.state.cti.globalLet._cti_phoneBar_state[currentState].Investigate
        return Investigate ? 1 : 0
      },
      //转接原因
      transferReasonShow(){
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
        if (ctiExtenState !== '') {
          currentState = ctiExtenState
        }
        let transferReason = this.$store.state.cti.globalLet._cti_phoneBar_state[currentState].transferReason
        let transferReasonData = this.$store.state.cti.globalLet.transferData
        if(transferReasonData.TransferReason){
          this.trasferReason = this.return2Br(transferReasonData.TransferReason)
        } else {
          this.trasferReason = ''
        }
        this.transferAgent = transferReasonData.TransferAgent
        let agents = this.$getCache('agents')
        //根据坐席工号匹配名称
        if(agents&&agents.length>0){
          agents.forEach(item=>{
            if(item.exten === this.transferAgent){
              this.transferAgentNum = item.displayName
            }
          })
        }
        return transferReason && this.trasferReason ? 1 : 0
      },
      consultThreeWayCall () { // 是否显示咨询三方会话按钮
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
        if (ctiExtenState !== '') {
          currentState = ctiExtenState
        }
        let consultThreeWayCall = this.$store.state.cti.globalLet._cti_phoneBar_state[currentState].consultThreeWayCall
        return consultThreeWayCall ? 1 : 0
      },
      consultTransfer () { // 是否显示咨询转接按钮
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
        if (ctiExtenState !== '') {
          currentState = ctiExtenState
        }
        let consultTransfer = this.$store.state.cti.globalLet._cti_phoneBar_state[currentState].consultTransfer
        return consultTransfer ? 1 : 0
      },
      threeway () { // 是否显示三方会话按钮
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
        if (ctiExtenState !== '') {
          currentState = ctiExtenState
        }
        let threeway = this.$store.state.cti.globalLet._cti_phoneBar_state[currentState].threeway
        return threeway ? 1 : 0
      },
      autoHangup () { // 是否显示三方之后，主动挂断其他方的按钮
        let currentState = this.$store.state.cti.globalLet._cti_stateDescription[this.$store.state.cti.globalLet._cti_currentState]
        let ctiExtenState = this.$store.state.cti.globalLet._cti_extenState
        if (ctiExtenState !== '') {
          currentState = ctiExtenState
        }
        let autoHangup = this.$store.state.cti.globalLet._cti_phoneBar_state[currentState].autoHangup
        return autoHangup && this.getAutoHangupList.length > 0 ? 1 : 0 // 结束三方按钮展示 && 结束列表有数据，可展示icon
      },
      getAllAgentStatus () { // 获取所有坐席状态，每个坐席当前是否空闲
        return this.$store.state.cti.globalLet._cti_allAgentStatus || []
      },
      ctiShowNumber () { // 软电话条是否显示号码
        return this.$store.state.cti.globalLet._cti_showNumber
      },
      waitState () { // 转接或者是咨询后的等待ing
        let waitState = this.$store.state.cti.globalLet.waitSate
        return waitState
      },
      showTransferDialog () { // 展示转接弹窗
        let showTransferDialog = this.$store.state.cti.globalLet.showTransferDialog
        return showTransferDialog
      },
      showConsultDialog () { // 展示咨询弹窗
        let showConsultDialog = this.$store.state.cti.globalLet.showConsultDialog
        return showConsultDialog
      },
      showTransferCancelDialog () { // 取消转接
        let showTransferCancelDialog = this.$store.state.cti.globalLet.showTransferCancelDialog
        return showTransferCancelDialog
      },
      calleeArea () { // 号码归属地
        let area = this.$store.state.cti.globalLet.calleeArea
        if (area.indexOf(' ') !== -1) {
          area = area.replace(/\s/ig, '')
        }
        return area
      },
      callingNum () { // 正在通话中的号码
        return this.$store.state.cti.globalLet.callingNum
      },
      phoneBarStauts () { // 电话条状态 eg: 空闲、小休
        let busyTypeName = this.$store.state.cti.globalLet.busyTypeName
        let phoneBarStatus = []
        for (let key in busyTypeName) {
          if (key !== '99') {
            let m7Value = m7Language('globalChineseKey.' + busyTypeName[key], null, true) || busyTypeName[key]
            let tempPhoneBarStatus = {key: key, value: m7Value}
            phoneBarStatus.push(tempPhoneBarStatus)
          }
        }
        return phoneBarStatus
      },
      answer () {
        return this.$store.state.webrtc.showAnswer
      },
    },
    watch:{
      callVisible(){
        if(!this.callVisible){
          this.phoneVisible = this.callVisible
        }
      }
    },
    beforeMount () {
      let labelType = this.$store.state.call.transCache.callLabelType
      this.labelType = labelType
      this.$store.dispatch('getCache', { type: 'callLabel' })
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "../../../assets/common.styl"
.phone-bar
  float left
  width calc(100vw - 57px - 198px - 350px - 90px - 165px)
  padding-top 7px
  font-size 16px
  line-height 28px
  .el-dropdown
    color $cf-white
    cursor pointer
    vertical-align top
    font-size 12px
  .phone-state
    float left
    width 180px
    height 28px
    padding 2px 18px
    border-radius 16px
    color $cf-white
    font-size 12px
    margin-top 3px
    font-weight bold
  .phone-state.free
    background #FF6161
  #answer
    background #459AE9
    width 80px
    border-radius 15px
    color white
    font-size 14px
  #hangup
    background #FB5259
    width 80px
    border-radius 15px
    color white
    font-size 14px
    border 1px solid #FB5259
  .phone_bar_btn
    display flex
    padding 4px 0 0 16px
    span
      display inline-block
      border 1px solid $c-main
      border-radius 50%
      margin-right 6px
      width 30px
      height 30px
      cursor pointer
      font-size 15px
      text-align center
      line-height 30px
      color $c-main
      box-sizing border-box
    .hangup
      border 1px solid #ff6161
      color #ff6161
    .iconfont
      font-size 15px
.call-out-window
  /deep/.newremark
    line-height 16px !important
.dialout_wrap,.input-wrap
  bors(1px,$c-main)
  border-radius 2px
  position relative
  .icon-dianhua
    font-size 18px
    height 30px
    line-height 30px
    text-align center
    color $cf-white
  .dialout_button_wrap
    position absolute
    right 0
    top -1px
    cursor pointer
    background-color $c-main
    width 44px
    height 32px
.input-wrap input
  height 30px
  width 250px
  border 0
  padding-left 4px
  font-size 12px
.history-item li
  white-space nowrap
  padding-top 10px
  min-width 250px
  font-size 14px
  line-height 18px
  div
    display inline-block
  .history-time
    color $cf-gray4
  .history-dialout
    color $cf-color2
    padding-left 6px
    cursor pointer
  
  .history-phone span
    display inline-block
    max-width 7em
    white-space nowrap
    text-overflow ellipsis
    overflow hidden
    vertical-align bottom
.history-name, .hangup-exten
  max-width 7em
  white-space nowrap
  text-overflow ellipsis
  overflow hidden
  vertical-align bottom
.hangup-exten
  display inline-block
  max-width 10em
  vertical-align middle
.hangup-li
  margin-bottom 10px
  .iconfont
    cursor pointer 
    position absolute
    right 10px
.send-btn
  display block
  background-color $c-main
  width 44px
  height 31px
  line-height 31px
  text-align center
  color $cf-white
  float right
  cursor pointer
.input-wrap
  margin-top 20px
[class^='call_']
  font-family "iconfont" !important
  font-size 12px
  font-style normal
  -webkit-font-smoothing antialiased
  display inline-block
  margin-right 4px
.call_dialout:before,.call_dialTransfer:before
  content "\e64f"
  color $cf-color2
.call_normal:before,.call_transfer:before
  content "\e674"
  color $c-cAgent
.phone-bar .phone-state.bustype_0
  background #459ae9
  color #fff
.phone-bar .phone-state.currentState
  background #FF9100
.phone-bar .phone-state.calling-bg
  background #ffb361
.screen-wrap
  text-align left
  width 100%
  height 100%
  .addCustomer
    border-bottom 0
  .func-tab .el-tabs__header
    border 0
.callingNum
  color $cf-white
  text-align right
  max-width 100%
  white-space nowrap
  text-overflow ellipsis
  overflow hidden
  line-height 1.5
  span
    font-size 14px
.group-wrap
  font-size 12px
  line-height 1
  &:after
    content ''
    clear both
    display block
    overflow hidden
    height 0
.stateSpan
  margin-right 10px
.call-label
  text-align left
.iconfont
  font-size 18px
#call_screen_wrap .el-dialog .el-dialog__body .summary
  height 352px
.diaoutUrl
  width 100%
  height 100%
  min-height 420px
.phone-bar .no-link-state
  width 90px
  text-align center
  /*margin-left 90px*/
  background #ff6161
.span-color
  color $cf-gray5
.calling-time
  font-size 12px
  line-height 1
.risk-warn-timetext,.risk-other
  padding 10px
  max-height 160px
  overflow auto
  margin-top 16px
.risk-warn-timetext
  background-color rgba(245,245,245,1)
.el-icon-remove
  color #FF6B6B
.el-icon-warning
  color #e6a23c
.icon-dianhuaben-01
  font-size 26px
  height 30px
  line-height 30px
  text-align center
  color #1296db
  cursor pointer
.phone-item
  width 100%
  max-height 200px
  padding-left 10px
  overflow-y auto
  overflow-x hidden
  li
    white-space nowrap
    padding-top 10px
    font-size 14px
    line-height 18px
    cursor pointer
    .item
      overflow hidden
      text-overflow ellipsis
      white-space nowrap
    .number
      padding-left 10px
@keyframes im_icon
  0%
    opacity 0.8
    transform rotate(0deg)
  0%
    opacity 1
    transform rotate(-20deg)
  50%
    opacity 1
    transform rotate(0deg)
  75%
    opacity 1
    transform rotate(20deg)
  100%
    opacity 0.8
    transform rotate(0deg)
.im
  display inline-block
  cursor pointer
  font-size 18px !important
  animation im_icon 1s infinite
  &:hover
    animation-play-state paused
</style>
